<template>
  <div
    class="FCPageContainer"
    :style="customStyle"
  >
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: 'FCPage',
  props: {
    direction: String,
    border: String,
    backgroundColor: String,
    justifyContent: String,
  },
  data() {
    return {}
  },
  computed: {
    customStyle() {
      return {
        '--direction': this.direction,
        '--border': this.border,
        '--backgroundColor': this.backgroundColor,
        '--justifyContent': this.justifyContent,
      }
    },
  },
}
</script>

<style scoped lang="less">
.FCPageContainer {
  display: flex;
  flex-direction: var(--direction);
  justify-content: var(--justifyContent);
  height: 100%;
  width: 100%;
  border: var(--border);
  // background-color: var(--backgroundColor);
}
</style>